<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>依据接口结构进行布局</title>
    <style>
        .a {
            color: red;
            display: flex;
        }

        .b {
            color: blue;
        }
    </style>
    <script src="./框架相关的js/vue.js"></script>
</head>

<body>

    <div id="app">

        <div v-for="(item,index) in score_item_list">
            <div v-if="index<2" class="a">
                <div style="width: 200px; ">
                    {{item.name}}
                </div>
                <div>
                    <div style="display:flex" class="">
                        是 <input :name="item.value" class="aa" checked type="radio" value="2">
                        一般 <input :name="item.value" class="aa" type="radio" value="1">
                        否 <input  :name="item.value" class="aa"  type="radio" value="0">
                    </div>
                </div>
            </div>
            <div v-else class="b">
                <div>
                    {{item.name}}
                </div>
                <div style="display:flex" class="">
                    是 <input :name="item.value" class="aa" checked type="radio" value="2">
                    一般 <input :name="item.value" class="aa" type="radio" value="1">
                    否 <input  :name="item.value" class="aa"  type="radio" value="0">
                </div>
            </div>
        </div>
       <button @click="fn">确定</button>

    </div>

    <script>

        new Vue({
            el: '#app',
            data: {
                score_item_list: null
            },
            methods: {
            fn(){
                this.$nextTick(()=>{
                    // console.log(document.getElementsByName("respond_score")[0],'2');
                    Array.from(document.getElementsByName("respond_score")).forEach(item=>{
                        if(item.checked){
                            console.log(item.value,'响应');
                        }
                    })
                    Array.from(document.getElementsByName("communicate_score")).forEach(item=>{
                        if(item.checked){
                            console.log(item.value,'沟通是否及时');
                        }
                    })
                    Array.from(document.getElementsByName("ability_score")).forEach(item=>{
                        if(item.checked){
                            console.log(item.value,'展专业能力');
                        }
                    })
                    Array.from(document.getElementsByName("efficiency_score")).forEach(item=>{
                        if(item.checked){
                            console.log(item.value,'出具报告');
                        }
                    })
                    Array.from(document.getElementsByName("quality_score")).forEach(item=>{
                        if(item.checked){
                            console.log(item.value,'报告质量');
                        }
                    })
                       
                  
                })
            }
            },
            mounted() {
                var res = { "code": 0, "message": "", "data": { "score_item_list": [{ "name": "响应是否及时", "value": "respond_score" }, { "name": "沟通是否顺畅评分", "value": "communicate_score" }, { "name": "专业能力是否胜任评分", "value": "ability_score" }, { "name": "出具报告是否高效评分", "value": "efficiency_score" }, { "name": "报告质量是否满意评分", "value": "quality_score" }], "score_value_list": [{ "name": "是", "value": 0 }, { "name": "一般", "value": 1 }, { "name": "否", "value": 2 }], "service_list": [{ "id": 1, "name": "审计服务" }, { "id": 2, "name": "高新认定" }, { "id": 3, "name": "加扣服务" }, { "id": 4, "name": "税务咨询" }, { "id": 5, "name": "资产评估" }, { "id": 6, "name": "财务外包" }, { "id": 7, "name": "知识产权" }, { "id": 8, "name": "财税律师" }, { "id": 9, "name": "注册代理" }] } }
                console.log(res);
                this.score_item_list = res.data.score_item_list
                console.log(this.score_item_list, '名字');

                //  this.$nextTick 的示例
                //    获取不到节点  真实的节点还没有挂载完成        可以等到下一次dom挂载完成后在获取
                console.log(document.getElementsByName("respond_score"),'获取节点1');
                console.log(document.getElementsByName("respond_score")[0],'获取单个节点1');
                this.$nextTick(()=>{
                    console.log(document.getElementsByName("respond_score"),'获取节点2');
                console.log(document.getElementsByName("respond_score")[0],'获取单个节点2');
                })
               
            },
        })

    </script>
</body>

</html>